<template>
	<div class="team-manager">
		<div class="scroller" :class="[dept.expand ? 'expand' : 'collapse']">
			<div class="create-team">
				<p>添加团队</p>
				<i class="el-icon-plus" @click="createTeam()"></i>
			</div>
			<!--<div class="team-list">-->
			<!--<div class="team-item">-->
			<!--<div class="team-name">-->
			<!--<p>精神小伙成双队</p>-->
			<!--<div class="operate">-->
			<!--<i class="el-icon-plus"></i>-->
			<!--<i class="el-icon-edit"></i>-->
			<!--</div>-->
			<!--</div>-->
			<!--<div class="group-name">下岗工人再就业队</div>-->
			<!--<div class="group-name">铁道游击队</div>-->
			<!--<div class="group-name">发际线和我作队</div>-->
			<!--</div>-->
			<!--</div>-->

			<div
				class="icon-arrow"
				:class="[dept.expand ? '_expand' : '_collapse']"
				@click="deptExpand"
			>
				<i class="el-icon-arrow-left" v-if="dept.expand"></i>
				<i class="el-icon-arrow-right" v-else></i>
			</div>
		</div>

		<!--添加团队-->
		<el-dialog
			:title="team.title"
			:visible.sync="team.visible"
			custom-class="team-dialog"
			width="450px"
		>
			<div class="dialog-content">
				<el-form ref="teamForm" :model="team.form" label-width="100px">
					<el-form-item label="团队名称：">
						<el-input v-model="team.form.name" size="small"></el-input>
					</el-form-item>
					<el-form-item label="组织名称：">
						<!--<div class="group-item" v-for="(group, index) in team.form.group">-->
						<!--<el-input v-model="group.name" size="small"></el-input>-->
						<!--<div>-->
						<!--<span-->
						<!--class="remove"-->
						<!--@click="removeGroupItem(index)"-->
						<!--v-if="index !== 0 || team.form.group.length > 1"-->
						<!--&gt;删除</span-->
						<!--&gt;-->
						<!--<i-->
						<!--class="create el-icon-plus"-->
						<!--@click="createGroupItem()"-->
						<!--v-if="index === team.form.group.length - 1"-->
						<!--&gt;</i>-->
						<!--</div>-->
						<!--</div>-->
					</el-form-item>
				</el-form>
			</div>
			<div class="dialog-footer">
				<el-button size="small" @click="team.visible = false">取消</el-button>
				<el-button size="small" type="primary" @click="team.visible = false"
					>确定</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'team-manager',
	components: {},
	data() {
		return {
			dept: {
				isDrag: false,
				loading: false,
				expand: true,
				list: []
			},
			team: {
				visible: false,
				form: {
					name: '',
					group: [
						{
							name: ''
						}
					]
				}
			}
		};
	},
	created() {},
	methods: {
		// 添加团队
		createTeam() {
			this.team.title = '添加团队';
			this.team.visible = true;
		},
		// 移除组织项
		removeGroupItem(itemIndex) {
			this.team.form.group = this.team.form.group.filter((item, index) => {
				if (itemIndex === index) {
					return false;
				} else {
					return true;
				}
			});
		},
		// 添加新组织项
		createGroupItem() {
			this.team.form.group.push({
				name: ''
			});
		}
	}
};
</script>

<style lang="stylus" scoped>
.team-manager {
    height 100%
	.scroller {
		display: flex;
		height: 100%;
		position: relative;
		.create-team {
			flexBox(space-between)
			padding 20px 26px
			font-weight 600
			font-size 15px
			i {
				color $main-color
				cursor pointer
				font-size 16px
			}
		}
		.team-list {
			height 90%
			overflow auto
			.team-item {
				margin-top 140px
				.team-name {
					padding 20px 26px
					flexBox(space-between)
					font-weight 600
					font-size 15px
					cursor pointer
					.operate {
						i {
							margin-left 10px
							cursor pointer
							transition .3s
							font-size 16px
							&:hover {
								color $main-color
							}
						}
					}
					&:hover, &.active {
						background #FFF5F2
						p {
							color $main-color
						}
					}
				}
				.group-name {
					padding 10px 0 10px 50px
					cursor pointer
					font-size 14px
					transition .3s
					&:hover, &.active {
						background #FFF5F2
						color $main-color
					}
				}
			}
		}

		.icon-arrow {
			position: absolute;
			top: calc(50% - 20px);
			display: inline-block;
			z-index: 9;
			cursor: pointer;
			width: 0;
			height: 0;
			border-top: 20px solid transparent;
			border-bottom: 20px solid transparent;

			i {
				position: absolute;
				top: -8px;
				left: 0;
				color: #666;
			}

			&._expand {
				border-right: 15px solid #f7f7f7;
				left: 285px;
			}

			&._collapse {
				left: 0;
				border-left: 15px solid #f7f7f7;

				i {
					left: -15px;
				}
			}

			&:hover {
				opacity: 0.8;
			}
		}

	}
}

/*弹窗*/
.el-dialog {
    .el-input {
        width 80%
    }
    span {
        .remove, .create {
            margin-left 10px
            cursor pointer
            &:hover {
                color $main-color
            }
        }
    }
    .dialog-footer {
        text-align center
        button {
            border-radius 50px
            padding 10px 26px
            margin 0 20px
        }
    }
}
</style>
